<template>
	<view class="detail-repair_content">
		<view class="search-header" style="color: #006EFF;">
			<u-search :show-action="true" :action-text="$t('project.btn_cancel')" :action-style="{'width': '150rpx'}" height="64" shape="square" v-model="keyword" :placeholder="$t('project.item_seach')"
			@custom="actCancel" :focus="false" @focus = "openList" @search="actSearch"></u-search>
		</view>
		<view v-show="historySearchDetail">
			<view class="history" v-if="JSON.parse(JSON.stringify(searchHistoryList)).length>=1">
				<view class="iconfont icon-lishi:before" style="width: 17rpx;display: inline;"></view>
				<text class="history_text">{{ $t('project.history_search')}}</text>
				<view class="icon icon-shanchu" style="float: right;margin-right: 20rpx;"
					@click="clearHistory()"></view>

				<view class="history_viewContent">
					<view class="history_view" v-for="(item,index) in searchHistoryList" :key="index"
						@click="itemSearch(item)">
						{{item}}
					</view>
				</view>
			</view>
		</view>
		<view class="detail-repair_content" v-if="projectItemList && JSON.parse(JSON.stringify(projectItemList)).length > 0">
		<u-checkbox-group class="detail-repair_group">
			<view class="detail-repair_item u-flex u-col-top" v-for="(item, index) in projectItemList">
				<view class="checkbox-box" v-if="type == 0">
					<u-checkbox @change="checkChange(item, index)" v-model="item.Checked" :name="index">
					</u-checkbox>
				</view>
				<!-- 	<view class="checkbox-box" v-if="type == 1">
					<u-checkbox @change="checkChange2" v-model="item.Checked" :name="index">
					</u-checkbox>
				</view> -->
				<view class="u-flex-1" style="margin-left:-30rpx"
					@click="$goPage('/repair/project',{project: item.Project, iid: item.Iid})">
					<view class="u-flex u-col-top">
						<view class="detail-repair_item--order u-border u-m-r-10" v-if="item.IndexNo != ''">
							{{ item.IndexNo }}
						</view>
						<view class="detail-repair_item--name u-flex">
							<view class="u-flex-1">{{item.ItemName}}
								<text class="tag" v-if="item.IsConfirm == 1 ">{{ $t('project.cli_confirming')}}</text>
								<text class="tag" v-if="item.IsConfirm == 2 ">{{$t('project.owner_confirming')}}</text>
								<text class="tag" v-if="item.IsConfirm == 3 ">{{$t('project.cli_rej')}}</text>
								<text class="tag" v-if="item.IsConfirm == 4 ">{{ $t('project.confirm_stat[4]')}}</text>
								<text class="tag" v-if="item.IsConfirm == 6 ">{{ $t('project.cli_rej_confirm')}}</text>
							</view>
						</view>
					</view>
					
					<view class="detail-repair_item--info u-flex u-row-right">
						<!-- <view class="detail-repair_item--child child-btn" v-if="item.Count > 0" 
							 @click.stop="loaded(item.Iid)">
							<text class="detail-repair_item--child__label" style="color: #006EFF;">子项目 </text>
							<text
								class="detail-repair_item--child__value child-btn_count" style="color: #006EFF;">{{ item.Count }}</text>
						</view> -->
						<view class="detail-repair_header--right">
							<u-button v-if="item.Count > 0"
								class="detail-repair_header--button" plain
								@click.stop="loaded(item.Iid)">
								{{$t('project.sub_item')}}{{item.Count}}
							</u-button>
						</view>
					</view>
				</view>
			</view>
		</u-checkbox-group>
		<u-loadmore :status="status" :icon-type="iconType" :load-text="loadText" margin-bottom="45" margin-top="45"
			color="#C1C0C0" />
		<view class="check-footer" v-if="type == 0">
			<view class="confirm-btn" @click="actCheck()">{{ $t('project.btn_confirm')}}</view>
		</view>
		<!-- <view class="check-footer" v-if="type == 1">
			<u-button @click="actDelte()">删除</u-button>
		</view> -->
		<view class="empty-wrap" v-if="JSON.parse(JSON.stringify(projectItemList)).length == 0">
			<u-empty :text="$t('mine.bbs_empty')" mode="list"></u-empty>
		</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				historySearchDetail: false,
				type: 0,
				project: 0,
				projectItemList: [],
				deleteItemIds: [],

				status: 'nomore',
				iconType: 'flower',
				loadText: {
					loadmore: this.$t('project.pull_up'),
					loading: this.$t('project.loading'),
					nomore: this.$t('project.note_no_more')
				},
				keyword:'',
				searchHistoryList: [],
			}
		},
		onLoad(options) {
			this.searchHistoryList = JSON.parse(uni.getStorageSync('searchFavoritesList') || '[]');
			this.project = options.project || 0;
			this.type = options.type || 0;
			this.loaded();
			uni.setNavigationBarTitle({
				title: this.$t('project.repair_sheet')
			})
		},
		methods: {
			openList(){
				this.historySearchDetail = true;
			},
			// // 清空历史搜素
			clearHistory() {
				uni.showToast({
					title: this.$t('project.clear_success')
				});
				uni.removeStorage({
					key: 'searchFavoritesList'
				});

				this.searchHistoryList = [];
			},
			itemSearch(item) {
				this.keyword = item
				// this.keySearch(item)
				this.actSearch(item)
			},
			actCancel() {
				this.historySearchDetail = false
				this.keyword = '';
				this.actSearch('');
			},
			actSearch(keyword) {
				this.historySearchDetail = false
				if(keyword!=""){
					if(this.searchHistoryList.length>=10){
						this.searchHistoryList.length=9;
					}
					// this.tabPageDetail = true
					if (this.searchHistoryList.includes(keyword)) {
						let i = this.searchHistoryList.indexOf(keyword);
						this.searchHistoryList.splice(i, 1);
						this.searchHistoryList.unshift(keyword)
					} else {
						this.searchHistoryList.unshift(keyword)
						uni.setStorageSync('searchFavoritesList', JSON.stringify(this.searchHistoryList))
					}
				}
				this.loaded();
			},
			loaded(prt) {
				if(prt != undefined){
					this.keyword = "";
				}
				//this.$http.get('/mgr/user/keep/project/item/list', {
				this.$http.get('/client/biz/project/item/pager', {
					project: this.project,
					prt: prt || 0,
					keyword: this.keyword
				}).then(res => {
					this.projectItemList = res;
				})
			},
			checkChange(item, index) {
				for (let i = 0; i < this.projectItemList.length; i++) {
					if (this.projectItemList[i].Checked) {
						this.projectItemList[i].Checked = false;
					}
				}
				this.projectItemList[index].Checked = true;
				this.setData({
				  projectItemList: this.projectItemList
				});
			},
			checkChange2(e) {
				if (e.value) {
					this.deleteItemIds.push(this.projectItemList[e.name].Iid);
				} else {
					for (let i = 0; i < this.deleteItemIds.length; i++) {
						if (this.projectItemList[e.name].Iid == this.deleteItemIds[i]) {
							this.deleteItemIds.splice(i, 1);
						}
					}
				}
			},
			actCheck() {
				let checkedItem = {};
				let flag = false;
				for (let i = 0; i < this.projectItemList.length; i++) {
					if (this.projectItemList[i].Checked) {
						checkedItem = this.projectItemList[i];
						flag = true;
						break;
					}
				}
				if (!flag) {
					uni.showToast({
						icon: 'none',
						title: this.$t('mine.choose_repair'),
					})
					return;
				}
				uni.$emit('checkItem', checkedItem)
				uni.navigateBack({
					delta: 1,
				})
			},
			actDelte() {
				let that = this;
				if (this.deleteItemIds.length == 0) {
					uni.showToast({
						title: this.$t('mine.choose_del_item'),
						icon: 'none',
					});
					return;
				}
				this.$http.post('/mgr/user/keep/project/item/delete', {
					pid: this.project,
					iids: this.deleteItemIds,
				}).then(res => {
					uni.showToast({
						icon: 'none',
						title: this.$t('mine.del_success'),
					})
					setTimeout(function () {
						that.loaded();
					}, 1000)
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.mgr-30 {
		margin-right: 30rpx;
	}

	.mgt-10 {
		margin-top: 10rpx;
	}

	.detail {
		white-space: normal;
		word-break: break-all;
	}

	.confirm {
		padding-top: 100rpx;
		padding-bottom: 100rpx;

		&-header {
			width: 100%;
			position: absolute;
			left: 0;
			top: 0;
			padding: 20rpx;
			background-color: #fff;

			&_state {
				margin-left: 38rpx;
				font-size: 26rpx;

				.block {
					display: inline-block;
					width: 26rpx;
					height: 26rpx;
					margin-right: 14rpx;
				}
			}

			&_state.gray {
				color: #909399;
				text-decoration: line-through;

				.block {
					background-color: #f4f4f5;
				}
			}

			&_state.red {
				color: #F05459;
				text-decoration: line-through;

				.block {
					background-color: #FDECED;
				}
			}

			&_state.blue {
				color: #409EFF;

				.block {
					background-color: #ecf5ff;
				}
			}

			&_state.green {
				color: #67c23a;

				.block {
					background-color: #e1f3d8;
				}
			}
		}

		&-footer {
			z-index: 99;
			position: fixed;
			width: 100%;
			bottom: 200rpx;
			text-align: center;
			background-color: #FFFFFF;
			display: flex;

			.u-btn {
				display: inline-block;
				margin: 20rpx;
			}
		}
	}
	.detail-repair_item.gray {
		background-color: #F4F4F5;
		text-decoration: line-through;

		.detail-repair_item--order {
			color: #909399;

			&::after {
				border-color: #909399;
			}
		}

		.detail-repair_item--child {
			text-decoration: line-through;
		}
	}
  
	.detail-repair_item.blue {
		background: #e1ecf9;

		.detail-repair_item--order {
			color: #409EFF;

			&::after {
				border-color: #409EFF;
			}
		}
	}

	.detail-repair_item.red {
		background: rgb(255, 232, 232);

		.detail-repair_item--order {
			color: #EA3B48;

			&::after {
				border-color: #EA3B48;
			}
		}
	}

	.detail-repair_item.green {
		background: #e5f6dc;

		.detail-repair_item--order {
			color: #67C23A;

			&::after {
				border-color: #67C23A;
			}
		}
	}
  .detail-repair_item--info {
		margin-top: -20rpx;
	}
	.detail {
		height: 100%;
	}

	.detail-tabs {
		width: 100%;
		position: absolute;
		left: 0;
		top: 0;
		background-color: #fff;
	}

	.detail-contnet {
		height: 100%;
		padding-top: 100rpx;

		&_swiper {
			min-height: 100%;
		}
	}

	.detail-header {
		// margin-top: 20rpx;
	}

	.detail-contnet_comment {
		overflow: hidden;
		margin-bottom: 24rpx;
	}

	.article-item {
		background-color: #fff;
		padding: 30rpx 30rpx 10rpx;

		.article-header {
			height: 85rpx;
			margin-bottom: 24rpx;

			&_avatar {
				margin-right: 26rpx;
			}

			&_name--text {
				font-size: 30rpx;
				color: #494949;
				font-weight: bold;
			}

			&_time {
				color: #999999;
				font-size: 26rpx;
			}

			&_comment {
				font-size: 26rpx;
				color: #0089FF;

				.icon {
					position: relative;
					top: 4rpx;
					font-size: 32rpx;
					margin-right: 6rpx;
				}
			}
		}

		.article-content {
			font-size: 30rpx;
			margin-bottom: 24rpx;
			white-space: normal;
			word-break: break-all;
			word-wrap: break-word;
			word-break: break-word;
		}

		.article-video {
			position: relative;
			padding-bottom: 30rpx;

			&_item {
				position: relative;
				margin-left: -30rpx;
				width: 100vw;
				// width: 100vw;
				// height: 100vh;
			}

			&_img {
				max-width: 690rpx;
				max-height: 300rpx;
				width: auto;
			}

			&_play {
				width: 62rpx;
				height: 62rpx;
				position: absolute;
				left: 50%;
				top: 50%;
				transform: translate(-50%, -50%);
				border-radius: 5px;
				background: #505050;

				&--icon {
					width: 100%;
					height: 100%;
				}
			}
		}

		.article-images {
			clear: both;
			overflow: hidden;
			padding-bottom: 10rpx;

			&_item {
				margin: 10rpx;
				float: left;
			}
		}

		.article-annex {
			color: #0089FF;
			margin-bottom: 20rpx;

			.u-icon {
				margin-right: 6rpx;
			}
		}
	}

	.detail-comment {
		padding: 0 32rpx;
		background-color: #fff;
		overflow: hidden;

		&_item {
			padding: 18rpx 0 32rpx;

			.comment-item_avatar {
				margin-right: 12rpx;
			}

			.item-content_header {
				margin-bottom: 20rpx;
			}

			.item-content_header--name {
				font-size: 24rpx;
				color: #131313;
			}

			.item-content_header--time {
				font-size: 20rpx;
				color: #B0B3B8;
			}

			.item-content_text {
				color: #5D5D5F;
				word-break: break-all;
			}
		}
	}

	.comment-box {
		padding: 24rpx 24rpx 88rpx;
		background: #F3F3F3;

		.inputStyle {
			padding: 20rpx;
			background: #FFFFFF;
			border: 1rpx solid #EAEAEA;
			border-radius: 8rpx;
		}
	}

	.comBtnStyle {
		margin-top: 14rpx;
		width: 170rpx;
		height: 60rpx;
		line-height: 60rpx;
		font-size: 30rpx;
		color: #FFFFFF;
		background: #2979ff;
		border-color: #2979ff;
		border-radius: 24rpx;
		float: left;
	}

	.btnStyle {
		margin-top: 14rpx;
		width: 118rpx;
		height: 60rpx;
		line-height: 60rpx;
		color: #FFFFFF;
		font-size: 28rpx;
		background: #2979ff;
		border-color: #2979ff;
		float: right;
	}

	.detail-comment_header {
		height: 76rpx;
		background-color: #fff;
	}

	.comment-header_action {
		font-size: 24rpx;
		color: #0089FF;
	}

	.comment-header_title--icon {
		width: 36rpx;
		height: 36rpx;
		margin-right: 6rpx;
	}

	.comment-header_title--label {
		font-size: 30rpx;
		color: #131313;
	}

	.detail-repair_header {
		padding: 30rpx 34rpx;
		background-color: #fff;
		margin-bottom: 20rpx;

		&--name {
			margin-bottom: 20rpx;

			.icon {
				font-size: 30rpx;
				color: #0089FF;
				margin-right: 12rpx;
			}
		}

		&--text {
			font-size: 31rpx;
			color: #131313;
		}

		&--price {
			color: #555555;
		}

		&--number {
			color: #C50909;
		}

		&--button {
			display: inline-block;
			height: 50rpx;
			line-height: 50rpx;
			font-size: 28rpx;
			margin-right: 10rpx;
			padding: 0 10rpx;
			color: #0089FF;
		}
	}

	.detail-repair_content {
		overflow: hidden;
		padding-bottom: 100rpx;

		.check-footer {
			z-index: 999;
			position: fixed;
			width: 100%;
			bottom: 0;
			padding: 20rpx 0;
			border-top: 1px solid #f1f1f1;
			text-align: center;
			background-color: #FFFFFF;
      .confirm-btn {
				display: inline-block;
				padding: 10rpx 40rpx;
				background-color: #3c9cff;
				color: #fff;
				border-radius: 10rpx;
				font-size: 28rpx;
			}
      .u-btn {
        display: inline-block;
      }
		}
	}

	.detail-repair_item {
		width: 100%;
		padding: 30rpx 34rpx;
		background-color: #fff;
		margin-bottom: 20rpx;

		&--name {
			color: #000000;
			font-weight: 500;
			margin-bottom: 24rpx;
		}

		&--checkbox {
			margin: 0 9rpx 9rpx 0;
		}

		&--order {
			display: inline-block;
			min-width: 36rpx;
			height: 36rpx;
			line-height: 36rpx;
			margin-bottom: 8rpx;
			padding: 0 6rpx;
			color: #909399;
			font-size: 24rpx;
			text-align: center;

			&::after {
				border-radius: 12rpx;
			}
		}

		&--order_blue {
			width: 36rpx;
			height: 36rpx;
			line-height: 36rpx;
			margin-right: 12rpx;
			color: #409EFF;
			font-size: 24rpx;
			text-align: center;
			background-color: #ECF5FF;

			&::after {
				border-radius: 12rpx;
				border-color: #B3D8FF;
			}
		}

		&--info {
			clear: both;
			overflow: hidden;
		}

		&--price {
			color: #555555;
		}

		&--number {
			color: #C50909;
		}

		&--child {
			float: left;
			width: 50%;
			margin-bottom: 10rpx;
			color: #666666;

			&__value {
				color: #000;
				margin-right: 6rpx;
			}

			&__icon {
				color: #0089FF;
			}
		}

		.child-btn {
			width: inherit;
			float: right;
			display: inline-block;
			padding: 6rpx 12rpx;
			color: #666666;
			background-color: #FFFFFF;
			border-radius: 6rpx;
			border: 1rpx solid #ddd;

			&_count {
				color: #131313;
				margin-left: 10rpx;
			}
		}

		&--child:nth-child(2n) {
			text-align: right;
		}

		&--child.textarea {
			width: 100%;
		}

		&--footer {
			margin-top: 20rpx;
			padding-top: 20rpx;
			text-align: right;

			.u-btn {
				margin-left: 20rpx;
			}
		}
	}

	.detail-contract_header {
		padding: 36rpx;
		background-color: #fff;
		margin-bottom: 20rpx;

		&--name {
			font-size: 32rpx;
			margin-bottom: 20rpx;

			.icon {
				font-size: 36rpx;
				color: #fff;
				margin-right: 12rpx;
				padding: 4rpx;
				background: linear-gradient(0deg, #0089FF 0%, #349DF8 100%);
				background-color: #0089FF;
				border-radius: 30px;
			}
		}

		.repair-item_cell {
			+.repair-item_cell {
				margin-top: 24rpx;
			}

			&--label {
				color: #666666;
			}

			&--value {
				color: #000000;
			}
		}
	}

	.detail-contract_content {
		overflow: hidden;

		.detail-comment_header {
			height: 88rpx;
			padding: 0 27rpx;
		}

		.article-item {
			margin-bottom: 24rpx;
		}
	}

	.detail-contract_attrs {
		margin: 30rpx auto;
		padding: 30rpx;
		border-radius: 10rpx;
		background-color: #edf5fc;
	}

	.fixed-publish {
		z-index: 9999;
		position: fixed;
		right: 4rpx;
		bottom: 200rpx;
	}

	.project-header {
		&_item {
			margin: 0 16rpx 16rpx 0;

			.icon {
				color: #0089FF;
				margin: 0 6rpx;
			}
		}

		&_item.current {
			display: inline-block;
			padding: 0 18rpx;
			color: #0089FF;
			line-height: 1.6;
			// background: #E9F4FE;
			border-radius: 4rpx;
		}
	}

	.empty-cnt {
		background-color: #fff;

		.u-empty {
			padding: 100rpx 0;
		}
	}

	.detail-repair_group {
		display: block;
		.tag {
			margin-left: 8rpx;
			padding: 2rpx 8rpx;
			font-size: 24rpx;
			color: #FFFFFF;
			background-color: #c9d8e8;
			border-radius: 4rpx;
		}
		.checkbox-box {
			width: 80rpx;
		}
	}

	.mgb-10 {
		margin-bottom: 10rpx;
	}

	.search-header {
		background-color: #fff;
		padding: 30rpx;
		margin-bottom: 20rpx;
	}

	.search-content {
		overflow: hidden;
	}

	.like-staffs {
		font-size: 30rpx;
		font-family: sans-serif;
		color: #515b7c;
		background-color: #F5F5F5;
		white-space: normal;
		word-break: break-all;
		word-wrap: break-word;
		word-break: break-word;
	}

	.check-box {
		width: 600rpx;
		padding: 40rpx;
	}

	.check-title {
		font-size: 32rpx;
		margin-bottom: 20rpx;
	}

	.check-item {
		width: 100%;
		background-color: #fff;
		height: 106rpx;
		padding: 0 24rpx 0 18rpx;
	}
	.history {
		margin-top: 20rpx;
		background-color: #fff;
		padding: 20rpx 10rpx;
	}

	.history_text {
		margin-left: 10rpx;
		font-size: 30rpx;
	}

	.history_viewContent {
		width: 100%;
		flex-wrap: wrap;
		display: flex;
		padding: 10rpx 20rpx;
	}

	.history_view {
	  background-color: #fff;
	  padding: 4rpx 20rpx;
	  margin-right:20rpx;
	  border: 1px solid #f1f1f1;
	  border-radius: 30rpx;
	  text-align: center;
	  font-size: 28rpx;
	}

	.fire_text {
		margin-left: 10rpx;
		font-size: 12px;
	}

	.fire_search {
		margin-top: 20rpx;
	}

	.fire_viewContent {
		width: 100%;
		flex-wrap: wrap;
		justify-content: space-between;
		display: flex;
		padding: 0 40rpx;
	}

	.fire_view {
		background-color: #E2E0E0;
		padding: 4rpx 20rpx 4rpx 20rpx;
		margin-top: 20rpx;
		min-width: 200rpx;
		flex-shrink: 0;
		border: 1px solid grey;
		border-radius: 15rpx;
		text-align: center;
	}

	.fire_viewContent:after {
		content: '';
		width: 30%;
	}

	.history_hr {
		width: 95%;
		margin-top: 40rpx;
		// text-align: center;
		height: 300rpx;
		padding-left: 10rpx;
		padding-right: 10rpx;
		// overflow:hidden;
		border-radius: 20rpx;
		border: 1px solid grey;
		margin-left: auto;
		margin-right: auto;
	}

	.h_content {
		margin-top: 20rpx;
	}

	// 这里是hr人事的
	.h_title {
		margin-left: 20rpx;
	}

	.h_view_wrap {
		display: flex;
		text-align: center;
		width: 100%;
		flex-wrap: wrap;
		justify-content: space-between;
		float: left;
	}

	.h_view {
		border: 1px solid grey;
		margin-top: 20rpx;
		min-width: 200rpx;
		border-radius: 20rpx;
		padding: 4rpx 20rpx 4rpx 20rpx;
	}

	.shareBtn {
		border-radius: 10rpx;
		padding: 10rpx;
		position: fixed;
		left: 50%;
		transform: translateX(-50%);
		bottom: 0;
	}

	.tabPage {
		width: 100%;
		margin-top: 20rpx;
	}
</style>
